<template>
  <button @click="sendCodeBtn">
    {{ number === 0 ? "发送验证码" : `${number}秒后发送` }}
  </button>
</template>

<script>
import { onUnmounted, ref } from 'vue'
export default {
  setup () {
    const number = ref(0)
    let timerId
    const sendCodeBtn = () => {
      // console.log('发送验证码')
      clearInterval(timerId)
      // 倒计时秒数初始化
      number.value = 60
      timerId = setInterval(() => {
        number.value--
        if (number.value <= 0) {
          number.value = 0
          clearInterval(timerId)
        }
      }, 1000)
    }

    onUnmounted(() => {
      clearInterval(timerId)
    })

    return { sendCodeBtn, number }
  }
}
</script>

<style lang="less" scoped></style>
